<template>
  <div class="work-experience">
    <h3>{{ title }}</h3>
    <el-timeline>
      <el-timeline-item
          v-for="(exp, index) in experiences"
          :key="index"
          :timestamp="`${exp.startDate} - ${exp.endDate}`"
          placement="top"
      >
        <el-card>
          <h4>{{ exp.company }} - {{ exp.position }}</h4>
          <p>{{ exp.description }}</p>
          <el-link
              v-if="exp.certificate"
              :href="exp.certificate"
              target="_blank"
              type="primary"
          >
            查看证明文件
          </el-link>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  experiences: Resume['workExperiences']
  title: string
}>()
</script>